<template>
	<div>

		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>

		<div class="container bgd_color_gray">
			<div class="pad_lr26 bgd_color_white line_height86 border_bot1 f_size20">
				<img class="margin_rg20" src="../static/images/account.png" />
				<input v-model="phone" class="line_height80 border_none" type="" name="" id="" value="" placeholder="手机号" />
			</div>
			<div class="pad_lr26 bgd_color_white line_height86 border_bot1 f_size20">
				<img class="margin_rg20" src="../static/images/psw_icon.png" />
				<input v-model="newPass" class="line_height80 border_none" type="" name="" id="" value="" placeholder="新登录密码" />
			</div>
			<div class="position_rel pad_lr26 bgd_color_white line_height86 border_bot1 f_size20">
				<img class="margin_rg20" src="../static/images/verifycation_icon.png" />
				<input v-model="code" class="line_height80 border_none" type="" name="" id="" value="" placeholder="验证码" />
				<input type="button" id="btn" @click="getCode" value="获取验证码" class="f_size22 f_color_white bgd_color_main pad20">
			</div>
			<div class="pad_lr20_tb10 pad_t110">
				<button @click="retrieveClick" class="login_btn bgd_color_main f_color_white f_size26">提交</button>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				leftText: '',
				headerText: '找回登录密码',
				phone: '',
				code: '',
				newPass: 　 ''
			}
		},
		methods: {
			retrieveClick: function() {
				var self = this
				this.$api.post('/front/base/forgetPass', {
					phone: this.phone,
					code: this.code,
					newPass: 　this.newPass
				}, r => {
					console.log('找回密码返回r', r)
					if(r == '重置成功') {
						Toast(r)
						self.$router.back(-1)
					}
				})
			},
			getCode: function() {
				this.$api.get('/front/base/smscode', {
					phone: this.phone,
				}, r => {
					var countdown = 60;

					function sendemail() {
						var obj = $("#btn");
						settime(obj);
					}

					function settime(obj) { //发送验证码倒计时
						if(countdown == 0) {
							obj.attr('disabled', false);
							//obj.removeattr("disabled");
							obj.val("免费获取验证码");
							countdown = 60;
							return;
						} else {
							obj.attr('disabled', true);
							obj.val("重新发送(" + countdown + ")");
							countdown--;
						}
						setTimeout(function() {
							settime(obj)
						}, 1000)
					}
					sendemail()
				})
			}
		}
	}
</script>
<style>
	#btn {
		position: absolute;
		top: 5px;
		right: 24px;
		border-radius: 20px;
	}
</style>